<template>
  <!--加入标签页，点选切换上传excel或者连接数据库-->
  <SwitchTab @update:activeKey="handleTabChange" />
  <!--上传Excel文件-->
  <a-upload-dragger
    v-if="activeTab === '1'"
    v-model:fileList="fileList"
    name="file"
    :multiple="true"
    :before-upload="beforeUpload"
    action="/api/web/upload"
    @change="handleChange"
    @drop="handleDrop"
    @remove="handleRemove"
  >
    <p class="ant-upload-drag-icon">
      <inbox-outlined></inbox-outlined>
    </p>
    <p class="ant-upload-text">点击或拖动文件到此区域上传</p>
    <p class="ant-upload-hint">
      支持单个文件或批量上传。严禁上传敏感数据文件！
    </p>
  </a-upload-dragger>
  <!-- 连接数据库的相关内容 -->
  <div v-else>
    <DBConfig />
  </div>
</template>

<script lang="ts">
import { InboxOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { defineComponent, ref } from "vue";
import type { UploadChangeParam, UploadFile } from "ant-design-vue";
import SwitchTab from "./SwitchTab.vue";
import DBConfig from "./ConnectDB.vue";

export default defineComponent({
  components: {
    InboxOutlined,
    SwitchTab,
    DBConfig,
  },
  props: {
    prefixId: {
      type: String,
      required: true,
    },
  },
  setup(props, context) {
    const activeTab = ref("1");
    const fileList = ref<UploadFile[]>([]);

    const handleTabChange = (key: string) => {
      activeTab.value = key;
    };

    const beforeUpload = (file: UploadFile) => {
      const allowedExtensions = ["xls", "xlsx", "csv"];
      const isExcelOrCsv = allowedExtensions.some((ext) =>
        file.name.endsWith("." + ext)
      );
      if (!isExcelOrCsv) {
        message.error("只能上传 Excel 或 CSV 文件!");
        return false;
      }

      const isLessThan5M = (file.size as number) / 1024 / 1024 < 5;
      if (!isLessThan5M) {
        message.error("文件大小须小于5MB");
        return false;
      }

      const containsRestrictedName = file.name.includes("移动");
      if (containsRestrictedName) {
        message.error("请勿上传公司敏感数据");
        return false;
      }

      // 修改文件名，添加前缀ID
      const newFile = new File([file], `${props.prefixId}_${file.name}`, {
        type: file.type,
      });

      // 在上传之前将新文件添加到 fileList 中
      fileList.value.push(newFile);

      return newFile;
    };

    const handleChange = (info: UploadChangeParam) => {
      const status = info.file.status;
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        message.success(`${info.file.name} 文件上传成功`);
        context.emit("file-upload-success", info.fileList); // 发射自定义事件并传递文件列表
      } else if (status === "error") {
        message.error(`${info.file.name} 文件上传失败`);
      }
      //context.emit("file-list-change", info.fileList); // 只有在成功的时候才发送
    };

    const handleRemove = (file: UploadFile) => {
      const index = fileList.value.indexOf(file);
      if (index > -1) {
        fileList.value.splice(index, 1);
      }
      context.emit("file-list-change", fileList.value); // 发射文件列表变化事件
      console.log("文件删除", fileList.value);
    };

    const handleDrop = (e: DragEvent) => {
      console.log(e);
    };

    return {
      activeTab,
      fileList,
      handleTabChange,
      handleChange,
      handleRemove,
      handleDrop,
      beforeUpload,
    };
  },
});
</script>

<style scoped></style>
